
<nz-spin [nzTip]="'加载数据中...'" [nzSpinning]="loading"
>

<tianditu-map id="map" [options]="options" (loaded)="mapLoaded($event)" class="tdt-map"
[class.map-collapsed]="settingService.layout.collapsed"
>

        <marker *ngFor="let marker of markers"
        [point]="marker.point"
        [options]="marker.options"
        [label]="marker.data.pointName"
        (clicked)="showWindow($event,marker.data)"
        (dragended)="markerDragended(marker.data,$event)"
        ></marker>

</tianditu-map>

<div class="aside" [class.map-aside-collapsed]="settingService.layout.collapsed">
    <div class="aside-inner">
        <div nz-row  class="m-sm">
            <div nz-col [nzXs]="8">
                <span>开始日期</span>
            </div>
            <div nz-col [nzXs]="16">
                <nz-datepicker
                [(ngModel)]="dateRange.start"
                    ></nz-datepicker>
            </div>
        </div>

        <div nz-row  class="m-sm">
            <div nz-col [nzXs]="8">
                <span>结束日期</span>
            </div>
            <div nz-col [nzXs]="16">
                <nz-datepicker
                [(ngModel)]="dateRange.end"
                ></nz-datepicker>
            </div>
        </div>

        <div nz-row class="m-sm">
            <div nz-col [nzXs]="8">
                <span>分析指标</span>
            </div>
            <div nz-col [nzXs]="16">

                <nz-select style="width: 100%;"
                [nzMode]="'multiple'"
                [nzAllowClear]="'true'"
                [nzPlaceHolder]="'请选指标'"
                [(ngModel)]="criterions"
                [nzNotFoundContent]="'无法找到'">
                <nz-option
                    *ngFor="let item of criterionSource"
                    [nzLabel]="item.name"
                    [nzValue]="item.value">
                </nz-option>
            </nz-select>
            </div>
        </div>

        <div nz-row class="m-sm">
            <div nz-col [nzXs]="8">
                <span>河流</span>
            </div>
            <div nz-col [nzXs]="16">
                    <nz-select style="width: 100%;"
                    [nzMode]="'multiple'"
                    [nzAllowClear]="'true'"
                    [nzPlaceHolder]="'请选择河流'"
                    [(ngModel)]="riverIds"
                    [nzNotFoundContent]="'无法找到'">
                    <nz-option
                        *ngFor="let river of rivers"
                        [nzLabel]="river.name"
                        [nzValue]="river.value">
                    </nz-option>
                </nz-select>
            </div>
        </div>

        <div nz-row class="m-sm">
            <div nz-col [nzXs]="8">
                <span>水质类别</span>
            </div>
            <div nz-col [nzXs]="16">
                    <nz-select style="width: 100%;"
                    [nzMode]="'multiple'"
                    [nzAllowClear]="'true'"
                    [nzPlaceHolder]="'请选择水质类别'"
                    [(ngModel)]="limitTypes"
                    [nzNotFoundContent]="'无法找到'">
                    <nz-option
                        [nzLabel]="'I'"
                        [nzValue]="'1'">
                    </nz-option>
                    <nz-option
                        [nzLabel]="'II'"
                        [nzValue]="'2'">
                    </nz-option>
                    <nz-option
                        [nzLabel]="'III'"
                        [nzValue]="'3'">
                    </nz-option>
                    <nz-option
                        [nzLabel]="'IV'"
                        [nzValue]="'4'">
                    </nz-option>
                    <nz-option
                        [nzLabel]="'V'"
                        [nzValue]="'5'">
                    </nz-option>
                    <nz-option
                        [nzLabel]="'劣V'"
                        [nzValue]="'6'">
                    </nz-option>
                </nz-select>
            </div>
        </div>

        <div nz-row class="m-sm">
            <div nz-col [nzXs]="24">

                <button nz-button [nzType]="'primary'"
                [nzSize]="'large'"
                (click)="load()">
                    <span>搜索</span>
                </button>

                <button nz-button [nzType]="'primary'"
                [nzSize]="'large'"
                (click)="export()">
                    <span>导出</span>
                </button>
            </div>
        </div>

        <div nz-row class="m-sm">
            <div nz-col [nzXs]="24">
                <span>共{{riverTotal}}条河流，{{dataTotal}}个采样点</span>
            </div>
        </div>

        <div nz-row class="m-sm">
            <div nz-col [nzXs]="24">
                <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectedIndexChange)="switch($event)">
                    <nz-tab>
                        <ng-template #nzTabHeading>数据</ng-template>

                        <nz-table [nzDataSource]="markers"
                                #nzTable
                        >
                            <thead nz-thead>
                                <tr>
                                    <th nz-th><span>采样点</span></th>
                                    <th nz-th><span>水质类型</span></th>
                                    <th nz-th><span>所属河流</span></th>
                                </tr>
                            </thead>
                            <tbody nz-tbody>
                                <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                                    <td nz-td>
                                        {{data.data.pointName}}
                                    </td>
                                    <td nz-td>
                                        <!--
                                        // AppConsts.remoteServiceBaseUrl + "/Common/Images/MapImages/"+
                                        -->
                                        <span>{{data.data.nameColor }}</span>
                                        <nz-avatar *ngIf="data.data.markerImage" [nzSrc]="getMarkerImage(data.data.markerImage)" nzSize="small" class="mr-sm"></nz-avatar>
                                        <nz-avatar *ngIf="!data.data.markerImage" [nzSrc]="'/assets/img/icon/marker-' + data.data.waterLimitType + '.png'" nzSize="small" class="mr-sm"></nz-avatar>


                                    </td>
                                    <td nz-td>{{data.data.rivers}}</td>
                                </tr>
                            </tbody>
                        </nz-table>


                    </nz-tab>
                    <nz-tab>
                        <ng-template #nzTabHeading>图表</ng-template>

                        <pie
        [hasLegend]="true"
        title="水质"
        subTitle="水质"
        [total]="pieOpt.total"
        [data]="pieOpt.salesPieData"
        [colors]="pieOpt.colors"
        height="294"></pie>

                    </nz-tab>
                </nz-tabset>
            </div>
        </div>

    </div>
</div>

<div class="quick-menu" [class.show]="quickMenu">
    <div class="quick-menu-inner">
        <div class="settings-ctrl" (click)="quickMenu=!quickMenu">
            <i class="anticon anticon-question-circle-o"></i>
        </div>
        <div class="list-group list-group-flush">
            <a (click)="changeDraggable()" class="list-group-item">
                <span *ngIf="!markerDraggabled">启动修改点位</span>
                <span *ngIf="markerDraggabled">关闭修改点位</span>
            </a>
<!--
            <a (click)="saveImage()" class="list-group-item">
                <span >截图</span>
            </a>
-->
        </div>
    </div>
</div>
</nz-spin>

<water-window #openwin></water-window>

